<template>
  <el-table
      stripe
      :data="studentRecord.filter((v) => v.sign_in_status === 0)"
      style="width: 100%;margin-top: 1px;">

    <el-table-column
        prop="user_name"
        label="姓名"
        width="100">
    </el-table-column>

    <el-table-column
        prop="school_number"
        label="学号">
    </el-table-column>

    <el-table-column
        width="100"
        label="签到状态">
      <template slot-scope="scope">
        <el-tag
            style="font-size: 15px;"
            type="info"
            disable-transitions>未签到</el-tag>
      </template>
    </el-table-column>

    <el-table-column
        fixed="right"
        label="操作"
        width="120">
      <template slot-scope="{row}">

        <el-dropdown @command="handleCommand(row,$event)" trigger="click">
          <el-button type="primary" plain>
            标记为<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" style="width: 90px;">
            <el-dropdown-item style="font-size: 15px" command="turnSigned" >已签到</el-dropdown-item>
            <el-dropdown-item style="font-size: 15px" command="turnLeave" >请假</el-dropdown-item>
            <el-dropdown-item style="font-size: 15px" command="turnLate" >迟到</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Unsigned",

  data() {
    return {
      Detail:{},//该页面所属的签到表信息
      studentRecord:[{//学生签到信息数组
        user_id:'',
        user_name:'',
        school_number:'',
        sign_in_status:'',
        sign_in_time:[]
        },
      ],
    }
  },
  //初始化
  created() {
    this.Detail=this.$detail
    this.load()
  },
  methods: {
    //数据加载
    load(){
      request.get("/published/"+this.Detail.signInId).then(res =>{
        console.log(res)
        this.Detail=res
        this.studentRecord=JSON.parse(this.Detail.result.substring(10,(this.Detail.result).length-1))
      })
    },
    //根据签到状态展示签到标签内容
    statusText(status){
      if(status==='0'){ return "未签到"
      }else if(status==='1'){ return "已签到"
      }else if(status==='2'){ return "请假"
      }else if(status==='3'){ return "迟到"
      }
    },
    //根据当前时间生成对应格式的时间
    gotTime(){
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth()+1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();

      return yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    },
    //根据下拉菜单的选择响应不同的函数
    handleCommand(row, command) {
      switch (command) {
        case "turnSigned":
          this.turnSigned(row);
          break;
        case "turnLeave":
          this.turnLeave(row);
          break;
        case "turnLate":
          this.turnLate(row);
          break;
      }
    },
    //标记为已签到
    turnSigned(row){
      row.sign_in_status="1"
      this.changeStatus(row)
    },
    //标记为请假
    turnLeave(row){
      row.sign_in_status="2"
      this.changeStatus(row)
    },
    //标记为迟到
    turnLate(row){
      row.sign_in_status="3"
      this.changeStatus(row)
    },
    //发送更改签到状态的请求
    changeStatus(row){
      row.sign_in_time=this.gotTime()
      request.post("/published/sign/"+this.Detail.signInId+"/0",row).then(res =>{
        if(res){
          this.$message({
            message: "标记成功",
            type: 'success'
          });
          this.load()
        }else{
          console.log('error save!!');
        }
      })
    }
  },


}
</script>

<style scoped>

</style>